<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />
    <title>FAQ</title>
    <script>
        window.onload = function(){
            const toggles = document.querySelectorAll('.faq-toggle')
            toggles.forEach(toggle=>{
                toggle.addEventListener('click',()=>{
                    toggle.parentNode.classList.toggle('active')
                })
            })
        }
    </script>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            font-family: 'Muli',sans-serif;
            background-color: #f0f0f0;
        }

        h1{
            margin: 50px 0 30px;
            text-align: center;
        }
        .faq-container{
            max-width: 600px;
            margin: 0 auto;
        }

        .faq{
            background-color: transparent;
            border: 1px solid #9fa4a8;
            border-radius: 10px ;
            margin: 20px 0;
            padding: 30px;
            position: relative;
            overflow: hidden;
            transition: 0.3 ease all;

        }

        .faq.active{
            background-color: #fff;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1),0 3px 6px rgba(0,  0, 0, 0.1);
        }
        .faq.active::before,
        .faq.active::after{
            content: '\f075';
            font-family: 'Font Awesome 5 Free';
            color: #2ecc71;
            font-size: 7rem;
            position: absolute;
            opacity: 0.2;
            top: 20px;
            left: 20px;
            z-index: 0;
        }
        .faq.active::before{
            color: #3498db;
            top: -10px;
            left: -30px;
            transform: rotateY(180deg);
        }
        .faq-title{
            margin: 0 35px 0 0;
        }
        .faq-text{
            display: none;
            margin: 30px 0 0;
        }
        .faq.active .faq-text{
            display: block;
        }
        .faq-toggle{
            background-color: transparent;
            border: 0;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            padding: 0;
            position: absolute;
            top: 30px;
            right: 30px;
            height: 30px;
            width: 30px;
        }
        .faq-toggle:focus{
            outline: 0;
        }
        .faq-toggle .fa-times{
            display: none;
        }
        .faq.active .faq-toggle .fa-times{
            color: #fff;
            display: block;
        }
        .faq.active .faq-toggle .fa-chevron-down{
            display: none;
        }
        .faq.active .faq-toggle{
            background-color: #9fa4a8;
        }
    </style>
</head>

<body>
    <h1>常见问题反馈</h1>
    <div class="faq-container">
        <div class="faq active">
            <h3 class="faq-title">
                有什么问题？
            </h3>
            <p class="faq-text">
                没什么问题
            </p>
            <button class="faq-toggle">
                <i class="fas fa-chevron-down"></i>
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="faq">
            <h3 class="faq-title">
                那你点开问题界面做什么？
            </h3>
            <p class="faq-text">
                仅为教学作用
            </p>
            <button class="faq-toggle">
                <i class="fas fa-chevron-down"></i>
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="faq">
            <h3 class="faq-title">
                你会给这个视频点赞么
            </h3>
            <p class="faq-text">
                不会
            </p>
            <button class="faq-toggle">
                <i class="fas fa-chevron-down"></i>
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="faq">
            <h3 class="faq-title">
                为什么不会（会）？
            </h3>
            <p class="faq-text">
                白嫖yyds
            </p>
            <button class="faq-toggle">
                <i class="fas fa-chevron-down"></i>
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="faq">
            <h3 class="faq-title">
                1 + 1?
            </h3>
            <p class="faq-text">
                这我知道，等于 10
            </p>
            <button class="faq-toggle">
                <i class="fas fa-chevron-down"></i>
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>
</body>

</html>